<template>
  <div class="person">
    姓：<input type="text" name="" id="" v-model="firstName" /><br />
    名：<input type="text" name="" id="" v-model="lastName" /><br />
    全名<span>{{ fullName }}</span>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, ref, toRefs, toRef, computed } from 'vue';

let firstName = ref('');
let lastName = ref('');

// 计算属性 -- 只读
// fullName是ref定义的数据
// let fullName = computed(() => {
//   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })

// 有get必须有set
let fullName = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  },
  set(val) {
    console.log('有人修改了fullName', val)
    firstName.value = val.split('-')[0]
    lastName.value = val.split('-')[1]
  }
})

function changeFullName() {
  fullName.value = 'li-si'
}

</script>

<style>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>